<template>
<div class="Cardwrap">
    <h2>严选推荐</h2>
    <div class="Cardbox">
      <van-card
        v-for="item in items"
        :key="item.id"
        :price="item.originalPrice"
        :desc="item.characteristic ? item.characteristic: '暂无描述'"
        :title="item.name"
        :thumb="item.pic"
        @click="ClickItem(item.id)"
      >
        <template #footer>
          <van-icon @click.stop="clickItemcart(item.id)" name="shopping-cart" size="24px" color="#dd1a21"/>
        </template>
      </van-card>
    </div>
</div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  methods: {
    clickItemcart (id) {
      this.$emit('clickItemcart', id)
    },
    ClickItem (id) {
      this.$emit('clickItem', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.Cardwrap{
  h2{
    text-align: center;
    font-size: 20px;
  }
  .van-card__title{
    line-height: 35px;
    font-size: 16px;
  }
  .van-ellipsis{
    font-size: 14px;
  }
  .van-card__bottom{
    .van-card__price{
      color: #dd1a21;
    }
  }
  .van-card__content{
    margin-left: 20px;
  }
}
</style>
